<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>


    <!-- 
        v-cloak指令（没有值）：
            1.Vue实例创建完毕并接管容器后，会删掉v-cloak属性
            2.使用css配合它使用可以解决网速慢时页面出现{{xx}}的问题 
     -->
    <body>
        <div id="root">
            <h2 v-cloak>{{name}}</h2>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            Vue.config.productionTip = false;
            new Vue({
                el:"#root",
                data:{
                    name:"尚硅谷"
                }
            })
        </script>
    </body>
</html>